<template>
    <div class="transfer-order-container">
      <!-- 查询条件区域 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 表格操作按钮区域 -->
      <div class="table-actions">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-dropdown>
          <el-button type="primary">
            审核
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>审核通过</el-dropdown-item>
              <el-dropdown-item>审核不通过</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button type="primary" @click="handlePrint">打印</el-button>
        <el-button type="primary" @click="handleImport">导入</el-button>
        <el-button type="danger" @click="handleDelete">删除</el-button>
      </div>
  
      <!-- 数据表格 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :default-sort="{ prop: 'orderDate', order: 'descending' }"
      >
        <el-table-column label="操作" width="80">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orderDate" label="单据日期" width="120" sortable />
        <el-table-column prop="orderNo" label="单据编号" width="120" sortable />
        <el-table-column prop="relatedOrderNo" label="关联调拨订单编号" width="150" sortable />
        <el-table-column prop="goods" label="商品" width="120" sortable />
        <el-table-column prop="goodsType" label="商品类别" width="120" sortable />
        <el-table-column prop="goodsRemark" label="商品备注" width="150" />
        <el-table-column prop="quantity" label="数量" width="80" sortable />
        <el-table-column prop="unitPrice" label="单价" width="80" sortable />
        <el-table-column prop="outWarehouse" label="调出仓库" width="120" sortable />
        <el-table-column prop="inWarehouse" label="调入仓库" width="120" sortable />
        <el-table-column prop="rowRemark" label="分录备注" width="150" />
        <el-table-column prop="salesman" label="业务员" width="100" sortable />
        <el-table-column prop="creator" label="制单人" width="100" sortable />
        <el-table-column prop="auditor" label="审核人" width="100" sortable />
        <el-table-column prop="remark" label="备注" width="150" />
        <el-table-column prop="printTimes" label="打印次数" width="100" sortable />
        <el-table-column prop="relatedDeliveryNo" label="关联物流单号" width="150" sortable />
      </el-table>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import { ElDatePicker, ElForm, ElFormItem, ElButton, ElTable, ElTableColumn, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon, ArrowDown } from 'element-plus'
  import 'element-plus/dist/index.css' // 若已在全局引入可省略
  
  // 模拟表格数据，实际应从接口获取
  const tableData = ref([
    // 这里可根据实际字段填充数据，示例仅简单模拟
    {
      orderDate: '2025-06-01',
      orderNo: 'OD20250601001',
      relatedOrderNo: 'ROD20250601001',
      goods: '商品A',
      goodsType: '类别1',
      goodsRemark: '备注A',
      quantity: 5,
      unitPrice: 100,
      outWarehouse: '仓库1',
      inWarehouse: '仓库2',
      rowRemark: '分录备注1',
      salesman: '业务员甲',
      creator: '张三',
      auditor: '李四',
      remark: '普通备注',
      printTimes: 0,
      relatedDeliveryNo: 'DL20250601001'
    }
    // 可继续添加更多模拟数据...
  ])
  
  // 查询表单数据
  const searchForm = reactive({
    dateRange: ['2025-06-01', '2025-06-26']
  })
  
  // 查询方法
  const handleSearch = () => {
    console.log('执行查询，查询条件：', searchForm.dateRange)
    // 实际应调用接口，传参 searchForm 去后端获取数据，再更新 tableData
  }
  
  // 重置查询条件方法
  const handleReset = () => {
    searchForm.dateRange = ['2025-06-01', '2025-06-26']
  }
  
  // 新增方法
  const handleAdd = () => {
    console.log('执行新增操作')
    // 可弹出新增表单弹窗，调用接口新增数据后更新 tableData
  }
  
  // 编辑方法
  const handleEdit = (row) => {
    console.log('编辑行数据：', row)
    // 可弹出编辑表单弹窗，回显 row 数据，调用接口更新后刷新 tableData
  }
  
  // 审核相关（这里简单示例，实际可细化逻辑）
  // 打印方法
  const handlePrint = () => {
    console.log('执行打印操作')
    // 可调用打印相关逻辑，如打印当前表格或对应单据
  }
  
  // 导入方法
  const handleImport = () => {
    console.log('执行导入操作')
    // 可实现文件上传、解析，调用接口导入数据后更新 tableData
  }
  
  // 删除方法
  const handleDelete = () => {
    console.log('执行删除操作')
    // 可结合选中行（可扩展多选功能），调用接口删除数据后更新 tableData
  }
  </script>
  
  <style scoped>
  .transfer-order-container {
    padding: 20px;
    height: 800px;
  }
  .search-form {
    margin-bottom: 15px;
  }
  .table-actions {
    margin-bottom: 10px;
  }
  </style>